<script>
import ModuleCard from '@/components/business/module-card/index.vue'
import FixedFooter from "../../../../../components/business/fixed-footer/index.vue";
import UButton from "../../../../../uni_modules/uview-ui/components/u-button/u-button.vue";
import {
  deleteUsedRecord,
  deleteUsedRecordApi, getAgentListApi,
  getUsedMaterialInfoApi, getWarehouseListApi,
  scanMaterialApi
} from "../../../../../api/common/power-station";
import UFormItem from "../../../../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";
import UForm from "../../../../../uni_modules/uview-ui/components/u-form/u-form.vue";
import uSelect from "../../../../../components/base/u-select/index.vue";
import {getUserInfoApi} from "../../../../../api/common/user";
import {serialize} from "../../../../../static/utils/common";
import UInput from "../../../../../uni_modules/uview-ui/components/u--input/u--input.vue";

export default {
  name: "index",
  components: {UInput, uSelect, UForm, UFormItem, UButton, FixedFooter, ModuleCard },
  data() {
    return {
      materialEntryList: [],
      warehouseList: [],
      warehouseId: '',
      id: '',
      agentListVisible: false,
      disabled: false,
      barCode: '',
      barCodeVisible: false,
    }
  },
  onLoad(options) {
    this.id = options.id;
    this.getDetail()
    this.getWarehouseList()
  },

  computed: {
    // 如果列表materialEntryList中type字段全包含了组件、支架、逆变器、并网箱设置showInstall为true
    showInstall() {
      const typeList = this.materialEntryList.map(item => item.type);
      return ['组件', '支架', '逆变器', '并网箱'].every(item => typeList.includes(item));
    },
    filterMaterialEntryList() {
      return function (type) {
        return this.materialEntryList.filter(item => item.type === type);
      }
    }
  },
  methods: {
    async getDetail(){
      const { data: { materialEntryList, warehouseId } } = await getUsedMaterialInfoApi(this.id);
      this.materialEntryList = materialEntryList;
      this.warehouseId = warehouseId;
    },
    async deleteUsedRecord(id) {
      // 二次确认
      await uni.showModal({
        title: '提示',
        content: '确定删除该条记录吗？',
        confirmText: '确定',
        cancelText: '取消'
      })

      await deleteUsedRecordApi([id]);
      uni.showToast({
        title: '删除成功',
        icon: 'none'
      })
      this.getDetail();
    },
    async addMaterial() {
      // 模拟扫码
      await scanMaterialApi({});
      uni.showToast({
        title: '添加成功',
        icon: 'none'
      })
      this.getDetail();
    },
    // 获取代理商列表
    async getWarehouseList() {
      const { user } = await getUserInfoApi();
      const { data } = await getWarehouseListApi(user.userId);
      this.warehouseList = data;
    },
    add(type) {
      if(!this.warehouseId) {
        uni.showToast({
          title: '请选择所属仓库',
          icon: 'none'
        })
        return;
      }
      const data = {
        type,
        entryId: this.id,
        warehouseId: this.warehouseId
      }
      uni.navigateTo({
        url: `/pages/index/home/install/add/index?${serialize(data)}`
      })
    },
    scan() {
      this.barCodeVisible = true;
      uni.scanCode({
        success: async (res) => {
          this.barCode = res.result;
          // 提示识别码为：${res.result} 确认是否提交
          // 二次确认
          await uni.showModal({
            title: '提示',
            content: `编码为：${res.result}，确定安装此物料？`,
            confirmText: '确定',
            cancelText: '取消'
          })
          this.identifyBarCode()
        }
      })
    },
    // 识别条码
    async identifyBarCode() {
      if (!this.warehouseId) {
        uni.showToast({
          title: '请选择所属仓库',
          icon: 'none'
        })
        return;
      }
      const { data } = await scanMaterialApi({barcode: this.barCode, warehouseId: this.warehouseId, entryId: this.id});
      this.agentList = data;
      this.agentListVisible = true;
      this.barCodeVisible = true;
      this.getDetail()
      this.barCodeVisible = false;
    },
    install() {
    },
    wareHouseIdChange() {
      // this.getDetail();
    },
  }
}
</script>

<template>
  <view class="install">
    <view class="form-wrap">
      <u-form label-width="120">
        <u-form-item
            label="所属仓库"
            borderBottom
            ref="item1"
        >
          <u-select
              v-model="warehouseId"
              placeholder="请选择所属仓库"
              :options="warehouseList"
              :disabled="disabled"
              :props="{ label: 'name', value: 'id' }"
              @change="wareHouseIdChange"
          ></u-select>
          <u-icon
              slot="right"
              name="arrow-right"
          ></u-icon>
        </u-form-item>
      </u-form>
    </view>
    <module-card title="支架">
      <template v-slot:title-right>
        <text class="add" @click="add(4)">添加自用</text>
      </template>
      <view class="card" v-for="(material, index) in filterMaterialEntryList('支架')" :key="index">
        <view>
          <view class="item"><text class="label">物料号: </text><text>{{material.code}}</text></view>
          <view class="item"><text class="label">物料名称: </text><text>{{material.name}}</text></view>
          <view class="item"><text class="label">物料规格: </text><text>{{material.spec}}</text></view>
          <view class="item"><text class="label">物料条码: </text>
            <view class="cell value-group">
              <view class="cell-bd">{{material.barcode}}</view>
              <view class="cell-bd">{{material.createTime}}</view>
              <view class="cell-ft close">
                <!--删除按钮 icon-->
                <!--<u-icon name="close-circle-fill" size="18" color="red"></u-icon>-->
              </view>
            </view>
          </view>
        </view>
        <view class="del-btn" @click="deleteUsedRecord(material.id)">
          <!--删除-->
          <u-icon name="trash" size="30" color="#"></u-icon>
        </view>
      </view>
    </module-card>
    <module-card title="并网箱">
      <template v-slot:title-right>
        <text class="add" @click="add(2)">添加自用</text>
      </template>
      <view class="card" v-for="(material, index) in filterMaterialEntryList('并网箱')" :key="index">
        <view>
          <view class="item"><text class="label">物料号: </text><text>{{material.code}}</text></view>
          <view class="item"><text class="label">物料名称: </text><text>{{material.name}}</text></view>
          <view class="item"><text class="label">物料规格: </text><text>{{material.spec}}</text></view>
          <view class="item"><text class="label">物料条码: </text>
            <view class="cell value-group">
              <view class="cell-bd">{{material.barcode}}</view>
              <view class="cell-bd">{{material.createTime}}</view>
              <view class="cell-ft close">
                <!--删除按钮 icon-->
                <!--<u-icon name="close-circle-fill" size="18" color="red"></u-icon>-->
              </view>
            </view>
          </view>
        </view>
        <view class="del-btn" @click="deleteUsedRecord(material.id)">
          <!--删除-->
          <u-icon name="trash" size="30" color="#"></u-icon>
        </view>
      </view>
    </module-card>
    <module-card title="组件">
      <template v-for="(material, index) in filterMaterialEntryList('组件')">
        <view class="card" :key="index">
          <view>
            <view class="item"><text class="label">物料号: </text><text>{{material.code}}</text></view>
            <view class="item"><text class="label">物料名称: </text><text>{{material.name}}</text></view>
            <view class="item"><text class="label">物料规格: </text><text>{{material.spec}}</text></view>
            <view class="item"><text class="label">物料条码: </text>
              <view class="cell value-group">
                <view class="cell-bd">{{material.barcode}}</view>
                <view class="cell-bd">{{material.createTime}}</view>
                <view class="cell-ft close">
                  <!--删除按钮 icon-->
                  <!--<u-icon name="close-circle-fill" size="18" color="red"></u-icon>-->
                </view>
              </view>
            </view>
          </view>
          <view class="del-btn" @click="deleteUsedRecord(material.id)">
            <!--删除-->
            <u-icon name="trash" size="30" color="#"></u-icon>
          </view>
        </view>
      </template>
    </module-card>
    <module-card title="逆变器">
      <template v-for="(material, index) in filterMaterialEntryList('逆变器')">
        <view class="card" :key="index">
          <view>
            <view class="item"><text class="label">物料号: </text><text>{{material.code}}</text></view>
            <view class="item"><text class="label">物料名称: </text><text>{{material.name}}</text></view>
            <view class="item"><text class="label">物料规格: </text><text>{{material.spec}}</text></view>
            <view class="item"><text class="label">物料条码: </text>
              <view class="cell value-group">
                <view class="cell-bd">{{material.barcode}}</view>
                <view class="cell-bd">{{material.createTime}}</view>
                <view class="cell-ft close">
                  <!--删除按钮 icon-->
                  <!--<u-icon name="close-circle-fill" size="18" color="red"></u-icon>-->
                </view>
              </view>
            </view>
          </view>
          <view class="del-btn" @click="deleteUsedRecord(material.id)">
            <!--删除-->
            <u-icon name="trash" size="30" color="#"></u-icon>
          </view>
        </view>
      </template>
    </module-card>

    <u-modal :show="barCodeVisible"
             title="H5输入条形码，小程序使用摄像头扫描"
             showCancelButton
             @cancel="barCodeVisible = false"
             @close="barCodeVisible = false"
             @confirm="identifyBarCode"
    >
      <view class="slot-content">
        <u-input
            v-model="barCode"
            type="text"
            placeholder="请输入条形码"
            maxlength="20"
        ></u-input>
      </view>
    </u-modal>
    <fixed-footer>
      <!--<u-button-->
      <!--    type="primary"-->
      <!--    class="footer-btn"-->
      <!--    @click="install"-->
      <!--&gt;安装</u-button>-->
      <u-button
          type="primary"
          class="footer-btn"
          @click="scan"
          color="#dab386"
      >扫码</u-button>
    </fixed-footer>
  </view>
</template>

<style scoped lang="scss">
@import "../../../../../static/style/theme.scss";
.install {
  padding-bottom: 80px;
}
.module-card{
  background: none;
  padding-bottom: 0px;
  margin-bottom: 0px;
  .add{
    color: $main-color;
    font-size: 14px;
  }
}
/deep/ .module-card__title{
  border-bottom: none;
  margin-bottom: 0px;
  border-bottom: none;
}
.card{
  position: relative;
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 15px;
  .item{
    font-size: 14px;
    margin: 10px;
    .label{
      width: 80px;
      display: inline-block;
    }
    .value-group{
      margin: 5px 0;
    }
    .close{
      color: red;
    }
  }
}
.del-btn{
  color: red;
  text-align: right;
  font-size: 14px;
  margin-top: 10px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  background: #eee;
  padding: 10px;
  border-radius: 50%;
}
.form-wrap{
  padding: 20px;
}
</style>
